<template>
  <div>
    <div class="list-btn">
      用户姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      结清状态:
      <Select clearable style="width:200px" v-model="params.settleStatus" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=0>未结清</Option>
        <Option :value=1>已结清</Option>
      </Select>
    </div>
    <div class="list-btn">
      催收状态:
      <Select clearable style="width:200px" v-model="params.allotStatus" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=0>催收中</Option>
        <Option :value=1>催收已回收</Option>
      </Select>
    </div>
    <div class="list-btn">
      时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px"  ></DatePicker>
    </div>

    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>

    <Modal
      v-model="showModal.isLinkShow"
      title="用户信息"
      width="600px"
      :footer-hide="true"
      :loading="loading">
      <Tabs  v-model="linkTab" @on-click="change">
        <TabPane label="基本信息" name="name1">
          <Form :model="basicInfo" :label-width="90">
            <FormItem label="姓名" class="width30">
              <Input v-model="basicInfo.realname" disabled></Input>
            </FormItem>
            <FormItem label="手机号" class="width30">
              <Input v-model="basicInfo.phone" disabled></Input>
            </FormItem>
            <FormItem label="身份证号" style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="icard" disabled></Input>
            </FormItem>
          </Form>
          <Form :model="otherInfo" :label-width="90">
            <FormItem label="居住地区"  style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="otherInfo.area" disabled></Input>
            </FormItem>
            <FormItem label="详细地址"  style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="otherInfo.address" disabled></Input>
            </FormItem>
            <FormItem label="单位名称"  style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="otherInfo.companyName" disabled></Input>
            </FormItem>
            <FormItem label="工作性质"  style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="otherInfo.workType" disabled></Input>
            </FormItem>
            <FormItem label="	单位地区"  style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="otherInfo.companyArea" disabled></Input>
            </FormItem>
            <FormItem label="单位详细地址"  style="display: block;width:80%;margin-bottom: 5px">
              <Input v-model="otherInfo.companyAddress" disabled></Input>
            </FormItem>
            <!--<FormItem label="月薪" class="width30">
              <Input v-model="otherInfo.monthly" disabled></Input>
            </FormItem>-->
          </Form>
          <Form :model="linkman" :label-width="90">
            <h3 class="title">常用联系人</h3>
            <FormItem label="姓名" class="width30">
              <Input v-model="linkman.contractName" disabled></Input>
            </FormItem>
            <FormItem label="姓名" class="width30">
              <Input v-model="linkman.contractNameOne" disabled></Input>
            </FormItem>
            <FormItem label="关系" class="width30">
              <Input v-model="linkman.relation" disabled></Input>
            </FormItem>
            <FormItem label="关系" class="width30">
              <Input v-model="linkman.relationOne" disabled></Input>
            </FormItem>
            <FormItem label="手机号" class="width30">
              <Input v-model="linkman.contractMobile" disabled></Input>
            </FormItem>
            <FormItem label="手机号" class="width30">
              <Input v-model="linkman.contractMobileOne" disabled></Input>
            </FormItem>
          </Form>
          <Form :model="bankCard" :label-width="90" class="form">
            <h3 class="title">绑定银行卡</h3>
            <FormItem label="银行卡名称"  style="display: inline-block;width:45%;margin-bottom: 5px">
              <Input v-model="bankCard.bankName" disabled></Input>
            </FormItem>
            <FormItem label="银行卡卡号" style="display: inline-block;width:45%;margin-bottom: 5px">
              <Input v-model="bankCard.bankNum" disabled></Input>
            </FormItem>
            <FormItem label="预留手机号" style="display: inline-block;width:45%;margin-bottom: 5px">
              <Input v-model="bankCard.bankPhone" disabled></Input>
            </FormItem>
            <FormItem label="完成绑定时间" style="display: inline-block;width:45%;margin-bottom: 5px">
              <Input v-model="bankCard.createTime" disabled></Input>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="通讯录" name="name2">
          <Table border :columns="linkTitle" :data="linkData"></Table>
          <Page style="margin-top: 10px;text-align: right;" :current="link.pageCurrent" :total="linkTotal" simple  @on-change="changeLinkNum"/>
        </TabPane>
        <TabPane label="通话记录" name="name3">
          <Table border :columns="recordTitle" :data="recordData"></Table>
          <Page style="margin-top: 10px;text-align: right;" :current="record.pageCurrent" :total="recordTotal" simple  @on-change="changeRecordNum"/>

        </TabPane>
      </Tabs>

      <div style="text-align: right;margin-top: 20px">
        <Button @click="showModal.isLinkShow = false;" type="primary">关闭</Button>
        <!--<Button type="primary" @click.prevent="UpdateData">确定</Button>-->
      </div>
    </Modal>
    <Modal
      v-model="showModal.isShow"
      title="查看催收记录"
      :footer-hide="true"
      :loading="loading">
      <Form style="">
        <Table height="400" :columns="CollectionLogTitle" border :data="CollectionLog"></Table>
      </Form>
      <div style="text-align: right;margin-top: 20px">
        <Button @click="showModal.isShow = false;">关闭</Button>
        <!--<Button type="primary" @click.prevent="UpdateData">确定</Button>-->
      </div>
    </Modal>
    <Modal
      v-model="showModal.editShow"
      title="新增催收记录"
      :footer-hide="true"
      :closable="true"
      :style="{textAlign:'left'}">
      <Form  :label-width="80" ref="formRole" :rules="ruleValidate" :model="formRole">
        <FormItem label="备注" prop="remark" >
          <Input v-model="formRole.remark" type="textarea"  :maxlength=200 :autosize="{ minRows: 4, maxRows: 8 }" placeholder="请输入" style="width:360px"></Input>
        </FormItem>
        <div style="text-align: right;margin-top: 20px">
          <Button @click="showModal.editShow = false;resetValidate('formRole')" style="margin-right:5px">取消</Button>
          <Button type="primary" @click="ok">确定</Button>
        </div>
      </Form>
    </Modal>

  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{
      change(name){
        if(name == 'name3'){
          this.record.pageCurrent = 1;
          console.log(this.recordData,'this.recordData')
          this.getRecordMan(this.record.pageCurrent);
        }else if(name == 'name2'){
          this.link.pageCurrent = 1;
          this.getLinkMan(this.link.pageCurrent);
        }
      },
      initData(){
        this.linkTab = 'name1';
        this.link.pageCurrent = 1;
        this.record.pageCurrent = 1;
      },
      changeRecordNum(value){
        this.record.pageCurrent = value;
        this.getRecordMan(this.record.pageCurrent);
      },
      getRecordMan(pageCurrent){
        this.$post('/bkmoxieyysorigincalls/list',{pageCurrent:pageCurrent,userId:this.user_id})
          .then((res) => {
            if(res.code === 0){
              this.recordData = res.data.pageListData;
              this.recordTotal = res.data.resultCount;
            }
          }, (err) => {
            console.log(err);
          })
      },
      changeLinkNum(value){
        this.link.pageCurrent = value;
        this.getLinkMan(this.link.pageCurrent);
      },
      getLinkMan(pageCurrent){
        this.$post('/bkuserlinkman/list',{pageCurrent:pageCurrent,userId:this.user_id})
          .then((res) => {
            if(res.code === 0){
              this.linkData = res.data.pageListData;
              this.linkTotal = res.data.resultCount;
            }
          }, (err) => {
            console.log(err);
          })
      },
      ok(){
         this.$refs['formRole'].validate((valid) => {

          if (valid) {
            this.$post('/bkcollectionlog/append',{
              collectionUserId:this.collectionUserId,
              remark:this.formRole.remark,
              collectionId:this.collectionId
           })
            .then((res) => {
              if(res.code === 0){
                this.showModal.editShow = false;
                this.resetValidate('formRole')
                this.$Message.success('提交成功！');
              }
            }, (err) => {
              console.log(err);
            })
            }
         })
      },
      getLink(id){
        this.$post('/user/customer/info',{
          id:id
        })
          .then((res) => {
            if(res.code === 0){
              const data = res.data;
              this.basicInfo.realname = data.realname; //基本信息
              this.basicInfo.phone = data.phone;
              let idCard = data.detailMap.userIdc.idc ? data.detailMap.userIdc.idc : "";
              let xing = '';
              for(let i=0;i<idCard.length-4;i++){
                xing += '*';
              }
              this.icard = xing + idCard.substr(idCard.length-4);
              this.basicInfo.idc = data.detailMap.userIdc.idc ? data.detailMap.userIdc.idc : "";
              this.basicInfo.idcFrontImg = data.detailMap.userIdc.idcFrontImg ? data.detailMap.userIdc.idcFrontImg : "";
              this.basicInfo.idcBacImg = data.detailMap.userIdc.idcBacImg ? data.detailMap.userIdc.idcBacImg : "";

              this.otherInfo = data.detailMap.userBasice; //其他信息
              this.otherInfo.workType = this.getType(this.otherInfo.workType,'work');

              this.linkman = data.detailMap.userBasice; //联系人
              this.linkman.relation = this.getType(this.linkman.relation,'relation');
              this.linkman.relationOne = this.getType(this.linkman.relationOne,'relation');

              this.bankCard = data.detailMap.userBankList[0] ? data.detailMap.userBankList[0] : {};
              let bankNum = this.bankCard.bankNum;
              let bankCardXing = '';
              for(let i=0;i<bankNum.length-4;i++){
                bankCardXing += '*';
              }

              this.bankCard.bankNum = bankCardXing + bankNum.substr(bankNum.length-4);//银行卡
              this.bankCard.createTime = this.bankCard.createTime ? this.getLocalTime(this.bankCard.createTime) : '';

            }
          }, (err) => {
            console.log(err);
          })
      },
      getCollectionLog(id){
        this.$post('/bkcollectionlog/list',{
          collectionId:id
        })
          .then((res) => {
            if(res.code === 0){
              this.CollectionLog = res.data;
            }
          }, (err) => {
            console.log(err);
          })
      },
      getType(num,type) {
        let obj = {};
        if(type == 'relation'){
          obj = { //联系人关系
            "1": "父母",
            "2": "配偶",
            "3": "兄弟",
            "4": "姐妹",
            "5": "朋友"
          }
        }else if(type == 'work'){//"打工", "个体户", "体制内工作", "老板", "无业"
          obj = { //公司性质
            "1": "打工",
            "2": "个体户",
            "3": "体制内工作",
            "4": "老板",
            "5": "无业",
          }
        }
        for (let key in obj) {
          if (key == num) {
            return obj[key];
            break;
          }
        }
      },
    },
    data () {
      return {
        linkTab:'',
        recordDataHas:false,
        linkDataHas:false,
        recordTotal:0,
        linkTotal:0,
        user_id:'',
        icard:'',
        link: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },
        record: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },
        tag: {
          'title': '我的催收',
          'path': '/work/urgeMine/list'
        },
        formRole:{},
        collectionId:'',
        collectionUserId:'',
        CollectionLog:[],
        showModal:{
          isShow:false,
          editShow:false,
          isLinkShow:false,
        },
        linkman: {},
        basicInfo: {},
        otherInfo: {},
        bankCard: {},
        ruleValidate: {
          remark: [
            { required: true, message: '请填写备注', trigger: 'blur' }
          ],
        },
        linkTitle:[
          {
            title:'姓名',
            key:'name'
          },
          {
            title:'手机号',
            key:'mobile'
          }
        ],
        linkData:[],
        recordData:[],
        recordTitle:[
          {
            title:'月份',
            key:'billMonth',
            minWidth:30
          },
          {
            title:'姓名',
            key:'name',
            minWidth:30,
            render: (h,params) =>{
              return h('div',params.row.name ? params.row.name : '未知')
            }
          },
          {
            title:'手机号',
            key:'peerNumber',
            minWidth:30
          },
          {
            title:'通话时长(s)',
            key:'duration',
            minWidth:30
          },
          {
            title:'通话次数',
            key:'callCount',
            minWidth:30
          }
        ],
        statusList:[
          {
            id: 0,
            name:'未分配'
          },
          {
            id: 1,
            name: '已分配'
          }
        ],
        CollectionLogTitle:[
          {
            title: '时间',
            align:'center',
            width:150,
            key:'createTime',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.createTime))
            }
          },
          {
            title: '备注',
            align:'left',
            key:'remark',
          }
        ],
        listTitle: [
          {
            title: '订单号',
            minWidth: 200,
            key: 'nid',
            align:'left',
          },
          {
            title: '用户姓名',
            key: 'realname',
            minWidth:100,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:120,
            align:'center',
            render: (h, params) => {
              let phone = params.row.phone;
              return h('div', `${phone.substr(0,3)}****${phone.substr(7)}`)
            }
          },
          {
            title: '借款周期(天)',
            key: 'loanDay',
            minWidth:110,
            align:'center'
          },
          {
            title: '借款金额(元)',
            key: 'loanMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.loanMoney))
            }
          },
          {
            title: '应还金额(元)',
            key: 'needRepayment',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.needRepayment))
            }
          },
         /* {
            title: '应还本金(元)',
            key: 'realMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.realMoney))
            }
          },*/
          {
            title: '逾期费用(元)',
            key: 'overdueAmount',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.overdueAmount))
            }
          },
          {
            title: '逾期天数',
            key: 'days',
            minWidth:110,
            align:'center'
          },
          {
            title: '已还金额(元)',
            key: 'repaymentMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.repaymentMoney))
            }
          },
          {
            title: '催回金额(元)',
            key: 'collectionMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.collectionMoney))
            }
          },
          {
            title: '合同开始时间',
            key: 'borrowTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.borrowTime))
            }
          },
          {
            title: '合同结束时间',
            key: 'repayTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.repayTime))
            }
          },
          {
            title: '结清状态',
            key: 'settleStatus',
            minWidth:110,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.settleStatus){
                case 0:
                  d.txt = '未结清';
                  d.color = '#f90';
                  break;
                case 1:
                  d.txt = '已结清';
                  d.color = '#19be6b';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
          {
            title: '催收状态',
            key: 'allotStatus',
            minWidth:140,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.allotStatus){
                case 0:
                  d.txt = `${params.row.collectionUserName}:催收中`;
                  break;
                case 1:
                  d.txt = '已回收';
                  break;

              }
              switch (params.row.settleStatus){
                case 0:
                  d.color = '#f90';
                  break;
                case 1:
                  d.color = '#19be6b';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
          {
            title: '操作',
            key: 'action',
            align:'center',
            width: 300,
            render: (h, params) => {
              if(params.row.allotStatus != 1){
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.initData();
                        this.showModal.isLinkShow = true;
                        this.user_id = params.row.userId;
                        this.getLink(params.row.userId);
                        // this.getRecordMan(1);
                        // this.getLinkMan(1);
                      }
                    }
                  }, '查看用户详情'),
                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showModal.isShow = true;
                        this.getCollectionLog(params.row.id);
                      }
                    }
                  }, '查看催记'),

                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showModal.editShow = true;
                        this.resetValidate('formRole');
                        this.formRole={};
                        this.collectionUserId = params.row.collectionUserId;
                        this.collectionId = params.row.id;
                      }
                    }
                  }, '新增催记'),

                ]);
              }else{
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showModal.isShow = true;
                        this.getCollectionLog(params.row.id);
                      }
                    }
                  }, '查看催记'),
                ]);

              }

            }
          },
        ],
        url: '/bkcollection/person/list',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
  .width30 {
    width: 40%;
    display: inline-block;
    margin-bottom: 5px;
  }
</style>
